<!DOCTYPE html>
<html lang="en">
<head>
    <title>bootstrap测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8"/>

    <!--<link rel="stylesheet" href="../static/css/bootstrap.min-4.0.0.css"/>
    <link rel="stylesheet" href="../static/css/style_bootstrap.css"/>
    <script type="text/javascript" src="../static/js/jquery-3.3.1.js"></script>
    <script src="../static/js/bootstrap-4.0.0.js"></script>-->

    <script type="text/javascript" src="../static/js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="../static/css/style_bootstrap.css"/>
    <link rel="stylesheet" href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"/>
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script>
        $(function () {
            $(".button").click(function () {
                alert(this.val());
            });
        });
    </script>
    <style>
        body {
            margin: 48px;
        }

        div.container div.row div {
            margin: 5px;
        }

        div.container div.row div {
            background-color: lightgray;
            border: 1px solid gray;
            text-align: center;
        }

        /*button {*/
        /*margin: 10px;*/
        /*}*/

        ul {
            margin: 10px;
        }

        br {
            margin: 20px;
        }
    </style>
</head>
<body>


<!-- 1.1 按钮 -->
<button class="btn" style="margin: 20px">原始样式按钮[btn]</button>
<button class="btn btn-default">默认按钮[btn btn-default]</button>
<button class="btn btn-primary">提交按钮[btn btn-primary]</button>
<button class="btn btn-success">成功按钮[btn btn-success]</button>
<br/>
<button class="btn btn-info">信息按钮[btn btn-info]</button>
<button class="btn btn-warning">警告按钮[btn btn-warning]</button>
<button class="btn btn-danger">危险按钮[btn btn-danger]</button>
<button class="btn btn-link">表现为链接[btn btn-link]</button>
<br/>
<button class="btn btn-lg">大一点按钮[btn btn-lg]</button>
<button class="btn btn-sm">小一点按钮[btn btn-sm]</button>
<button class="btn btn-xs">最小按钮[btn btn-xs]</button>
<button class="btn btn-block">宽屏按钮[btn btn-block]</button>
<br/>
<button class="btn active">激活状态按钮[btn active]</button>
<button class="btn disable">无效按钮[btn disable]</button>
<button class="btn disable btn-danger btn-xs">多种样式按钮[btn disable btn-danger btn-xs]</button>
<hr/>


<!-- 1.2 表格 -->
<table class="table">
    <thead>
    <th>头像[基本表格]</th>
    <th>名字</th>
    <th>分数</th>
    </thead>
    <tbody>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>德玛西亚-盖伦</td>
        <td>100</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>99</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>98</td>
    </tr>
    </tbody>
</table>
<hr/>
<table class="table table-striped">
    <thead>
    <th>头像[灰白条相间]</th>
    <th>名字</th>
    <th>分数</th>
    </thead>
    <tbody>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>德玛西亚-盖伦</td>
        <td>100</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>99</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>98</td>
    </tr>
    </tbody>
</table>
<hr/>
<table class="table table-bordered">
    <thead>
    <th>头像[带边框]</th>
    <th>名字</th>
    <th>分数</th>
    </thead>
    <tbody>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>德玛西亚-盖伦</td>
        <td>100</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>99</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>98</td>
    </tr>
    </tbody>
</table>
<hr/>
<table class="table table-hover">
    <thead>
    <th>头像[带鼠标悬停变灰效果]</th>
    <th>名字</th>
    <th>分数</th>
    </thead>
    <tbody>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>德玛西亚-盖伦</td>
        <td>100</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>99</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>98</td>
    </tr>
    </tbody>
</table>
<hr/>
<table class="table table-condensed">
    <thead>
    <th>头像[紧凑]</th>
    <th>名字</th>
    <th>分数</th>
    </thead>
    <tbody>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>德玛西亚-盖伦</td>
        <td>100</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>99</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>98</td>
    </tr>
    </tbody>
</table>
<hr/>
<table class="table table-striped table-bordered table-hover  table-condensed">
    <thead>
    <th>头像[多重效果]</th>
    <th>名字</th>
    <th>分数</th>
    </thead>
    <tbody>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>德玛西亚-盖伦</td>
        <td>100</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>99</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>98</td>
    </tr>
    </tbody>
</table>
<hr/>
<table class="table">
    <thead>
    <th>头像[激活样式]</th>
    <th>名字</th>
    <th>分数</th>
    </thead>
    <tbody>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>德玛西亚-盖伦</td>
        <td>100</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>99</td>
    </tr>
    <tr class="active">
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>98</td>
    </tr>
    </tbody>
</table>
<hr/>
<table class="table">
    <thead>
    <th>头像[成功样式]</th>
    <th>名字</th>
    <th>分数</th>
    </thead>
    <tbody>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>德玛西亚-盖伦</td>
        <td>100</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>99</td>
    </tr>
    <tr class="success">
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>98</td>
    </tr>
    </tbody>
</table>
<hr/>
<table class="table">
    <thead>
    <th>头像[信息样式]</th>
    <th>名字</th>
    <th>分数</th>
    </thead>
    <tbody>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>德玛西亚-盖伦</td>
        <td>100</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>99</td>
    </tr>
    <tr class="info">
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>98</td>
    </tr>
    </tbody>
</table>
<hr/>
<table class="table">
    <thead>
    <th>头像[警告样式]</th>
    <th>名字</th>
    <th>分数</th>
    </thead>
    <tbody>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>德玛西亚-盖伦</td>
        <td>100</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>99</td>
    </tr>
    <tr class="warning">
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>98</td>
    </tr>
    </tbody>
</table>
<hr/>
<table class="table">
    <thead>
    <th>头像[危险样式]</th>
    <th>名字</th>
    <th>分数</th>
    </thead>
    <tbody>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>德玛西亚-盖伦</td>
        <td>100</td>
    </tr>
    <tr>
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>99</td>
    </tr>
    <tr class="danger">
        <td><img width="20px" src="http://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>98</td>
    </tr>
    </tbody>
</table>
<hr/>


<!-- 1.3 图片 -->
<img src="http://how2j.cn/example.gif" class="img-rounded" title="圆角图片"/>
<img src="http://how2j.cn/example.gif" class="img-circle" title="圆形图片"/>
<img src="http://how2j.cn/example.gif" class="img-thumbnail" title="缩略图"/>
<hr/>


<!-- 1.4 表单 -->
<input type="text" class="form-control" value="文本框"/><br/>
<input type="password" class="form-control" value="password"/><br/>
<textarea class="form-control">文本域</textarea><br/>
<select style="width: 250px; horiz-align: center" class="form-control">
    <option>Ashe</option>
    <option>Brand</option>
    <option>Caitlyn</option>
</select>
<hr/>


<!-- 1.5 文本 -->
<span class="text-muted">span-->muted</span>&emsp;
<span class="text-success">span-->success</span>&emsp;
<span class="text-info">span-->info</span>&emsp;
<span class="text-warning">span-->waring</span>&emsp;
<span class="text-danger">span-->danger</span>
<hr/>


<!-- 1.6 背景 -->
<p class="bg-primary">p-->primary</p>
<p class="bg-success">p-->success</p>
<p class="bg-info">p-->info</p>
<p class="bg-warning">p-->warning</p>
<p class="bg-danger">p-->danger</p>
<hr/>


<!-- 1.7 其他 -->
<button class="close" aria-hidden="true">&times;</button>
<br/>
<span class="caret"></span><br/>
<div class="pull-left">文字浮动到左边</div>
<br/>
<div class="pull-right">文字浮动到右边</div>
<br/>
<div class="show">显示文字</div>
<br/>
<div class="hidden">隐藏文字</div>
<hr/>


<!-- 1.8 栅格布局 -->
<div class="container">
    <div class="row">
        <div class="col-xs-12">共12列</div>
    </div>
</div>
<br/><br/>
<div class="container">
    <div class="row">
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
    </div>
</div>
<br/><br/>
<div class="container">
    <div class="row">
        <div class="col-xs-4 ">占4列</div>
        <div class="col-xs-4 ">占4列</div>
        <div class="col-xs-4 ">占4列</div>
    </div>
</div>
<hr/>
<div class="container">
    <div class="row">
        <div class="col-xs-6 ">一半</div>
        <div class="col-xs-6 ">一半</div>
    </div>
</div>
<br/><br/>
<div class="container">
    <div class="row">
        <div class="col-xs-4 ">1/3</div>
        <div class="col-xs-4 ">1/3</div>
        <div class="col-xs-4 ">1/3</div>
    </div>
</div>
<br/><br/>
<div class="container">
    <div class="row">
        <div class="col-xs-3 ">1/4</div>
        <div class="col-xs-3 ">1/4</div>
        <div class="col-xs-3 ">1/4</div>
    </div>
</div>
<hr/>
<div class="container">
    <div class="row">
        <div class="col-xs-6 ">一半</div>
        <div class="col-xs-6 ">一半</div>
    </div>
</div>
<br/><br/>
<div class="container">
    <div class="row">
        <div class="col-xs-8 ">8格</div>
        <div class="col-xs-6 ">6格</div>
    </div>
</div>
<hr/>
<hr/>
<hr/>


<!-- 2.1 字体图标 -->
<!-- 字体图标 -->
<span class="glyphicon glyphicon-asterisk">测试一下字体图标</span><br/>
<!-- 字体图标设置颜色 -->
<span class="glyphicon glyphicon-asterisk text-success">测试一下字体图标带颜色</span><br/>
<!-- 字体图标加上超链接 -->
<a href="#nowhere"><span class="glyphicon glyphicon-asterisk"></span> 连接</a><br/>
<!-- button中应用字体图标 -->
<button class="btn btn-primary btn-xs">
    <span class="glyphicon glyphicon-asterisk"></span>最小的按钮
</button>
<button class="btn btn-primary btn">
    <span class="glyphicon glyphicon-asterisk"></span>普通的按钮
</button>
<hr/>

</body>
</html>